// 该文件专门用于创建整个应用的路由器
import {createRouter, createWebHashHistory} from "vue-router";

const home = () => import("../page/Home.vue")
const message = () => import("../page/home/HomeMessage.vue")
const msgQueryDetail = () => import("../page/home/homeMessage/MsgQueryDetail.vue")
const msgParamsDetail = () => import("../page/home/homeMessage/MsgParamsDetail.vue")
const msgPropParams = () => import("../page/home/homeMessage/MsgPropParams.vue")
const keepMessage = () => import("../page/home/KeepMessage.vue")
const about = () => import ("../page/About.vue")
const propsUse = () => import("../page/about/PropsUse.vue")
const propsDetail = () => import("../page/about/propsUse/PropsDetail.vue")
const errorPage = () => import("../page/ErrorPage.vue")
const authPage = () => import("../page/AuthPage.vue")
const isAuthPage = () => import("../page/auth/IsAuthPage.vue")
const beforeRoutePage = () => import("../page/auth/BeforeRoutePage.vue")
const beforeEnterPage = () => import("../page/auth/BeforeEnterPage.vue")

let KeepDetail = () => import('../page/home/keepMessage/KeepDetail.vue')
const routes = [
    {
        path: '/',
        redirect: '/home',
        meta: {
            menuHide: true
        }
    },

    {
        path: "/home",
        name: "home",
        component: home,
        children: [
            {
                path: "keepMessage",
                name: "home/keepMessage",
                component: keepMessage,
                meta: {
                    keepAlive: true,
                },
                children: [{
                    path: "keepDetail",
                    name: "home/keepMessage/keepDetail",
                    component: KeepDetail,

                }]
            },
            {
                path: "homeMessage",
                name: "home/homeMessage",
                component: message,
                children: [{
                    path: "msgQueryDetail",
                    name: 'home/homeMessage/msgQueryDetail',
                    component: msgQueryDetail,
                }, {
                    path: "msgParamsDetail/:id/:title",
                    name: 'home/homeMessage/msgParamsDetail',
                    component: msgParamsDetail,

                }, {
                    path: "msgPropParams/:id/:info",
                    name: 'home/homeMessage/msgPropParams',
                    component: msgPropParams,
                    /*     //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
                            // homeMessage: {id: 1}
                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            // homeMessage:true
                            */
                    props: true
                    /*       homeMessage: ($route) => {
                               return {
                                   id: $route.params.id,
                                   info: 'dsaa'
                               }}

           */

                },

                ],
            }
        ],
    }, {
        path: "/about",
        name: "about",
        component: about,
        children: [{
            path: "propsUse",
            name: "about/propsUse",
            component: propsUse,
            children: [{
                path: "msgDetail/:id/:title",
                name: 'about/propsUse/msgDetail',
                component: propsDetail,
                props: true
            }],
        }],
    }, {
        /*
        * 正则设置
        * */
        path: '/:path(.*)',
        name: "ErrorPage",

        component: errorPage

    },
    {
        name: 'authPage',
        path: '/authPage',
        component: authPage,
        children: [{
            name: 'authPage/isAuthPage',
            path: 'isAuthPage',
            component: isAuthPage,
            meta: {isAuth: true}

        },
            {
                name: 'authPage/beforeRoutePage',
                path: 'beforeRoutePage',
                component: beforeRoutePage,
                meta: {
                    isBeforeAuth: true
                }
            }, {
                name: 'authPage/beforeEnterPage',
                path: 'beforeEnterPage',
                component: beforeEnterPage,
                meta: {
                    isBeforeAuth: true
                },
                beforeEnter: (to, from, next) => {
                    console.log('beforeEnterPage 前置路由守卫')
                    next()
                }
            },


        ]
    }]

const router = createRouter({
    //history 看着干净 但兼容性略差
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes: routes
})
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫')
    if (to.meta.isAuth) { //判断是否需要鉴权
        // to.path
        if (localStorage.getItem('school') === 'atguigu') {
            next()
        } else {
            localStorage.setItem('school', 'atguigu');
            alert('前置路由 meta: {isAuth: true},\n  localStorage.setItem() ')
        }
    } else {
        next()
    }
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    // document.title = to.meta.title || '硅谷系统'
    localStorage.setItem('school', '');
})

export default router